<template>
	<view class="zfb-home">
		<view class="zfb-bgc">
			<view class="zfb-liu">
				<view class="cate-box">
					<view class="cate-list" v-for="(item,index) in CategoryImgList" :key="index">
						<image :src="item.url" mode="widthFix" style="width: 54.35rpx;"></image>
						<text>{{item.text}}</text>
					</view>
					<view class="cate-list">
						<image src="../../static/imgs/index/FlowPathImg-6.png" mode="widthFix" style="width:59.78rpx;"></image>
						<text>文胸</text>
					</view>
				</view>
				<view class="capsule">
					<image src="https://yxhadmin.oss-cn-qingdao.aliyuncs.com/dsdd/imgs/index/capsule.png"
						mode="widthFix"></image>
				</view>
			</view>
			<view class="RecyclingCategory">
				<view class="title-box">
					<view class="line"></view>
					<view class="text">回收品类</view>
					<view class="line"></view>
				</view>
				<view class="content-box">
					<view class="CategoryImg-item" v-for="(item,index) in RecyclingCategoryContent" :key="index">
						<view class="item-img">
							<image :src="item.url" mode="widthFix"></image>
						</view>
						<view class="item-text">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		onBeforeMount
	} from 'vue'
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	const CategoryImgList = ref([{
			url: '/static/imgs/index/FlowPathImg-1.png',
			text: 'T恤'
		},
		{
			url: '/static/imgs/index/FlowPathImg-2.png',
			text: '鞋子'
		},
		{
			url: '/static/imgs/index/FlowPathImg-3.png',
			text: '各种包包'
		},
		{
			url: '/static/imgs/index/FlowPathImg-4.png',
			text: '皮衣皮草'
		},
		{
			url: '/static/imgs/index/FlowPathImg-5.png',
			text: '羽绒服'
		}
	])
	const RecyclingCategoryContent = ref([{
			url: '/static/imgs/index/xiezi.png',
			text: '鞋子 '
		},
		{
			url: '/static/imgs/index/baobao.png',
			text: '包包'
		},
		{
			url: '/static/imgs/index/yurongfu.png',
			text: '羽绒服'
		},
		{
			url: '/static/imgs/index/xiazhuang.png',
			text: '夏装'
		},
		{
			url: '/static/imgs/index/piyi.png',
			text: '皮衣'
		},
		{
			url: '/static/imgs/index/picao.png',
			text: '皮草'
		},
		{
			url: '/static/imgs/index/wenxiong.png',
			text: '文胸'
		},
		{
			url: '/static/imgs/index/neiku.png',
			text: '内裤'
		}
	])
</script>
<style lang="scss" scoped>
	.zfb-home {
		height: 100vh;
		background-color: #f7f7f7;
		overflow: hidden;

		.zfb-bgc {
			width: 100%;
			height: 945rpx;
			background: url('https://yxhadmin.oss-cn-qingdao.aliyuncs.com/dsdd/imgs/index/banner.png') no-repeat;
			background-size: contain;

			.zfb-liu {
				position: relative;
				top: 360rpx;
				left: 50%;
				transform: translateX(-50%);
				height: 393rpx;
				width: 95%;
				background: url('https://yxhadmin.oss-cn-qingdao.aliyuncs.com/dsdd/imgs/index/FlowPath.png') no-repeat;
				background-size: contain;

				.cate-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 100rpx 0 0;

					.cate-list {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						text {
							font-size: 21.74rpx;
							color: #333333;
							margin-top: 10rpx;
						}
					}
				}
				.capsule {
					display: flex;
					align-items: stretch;
					justify-content: center;
					width: 100%;
					position: absolute;
					bottom: 5%;
				
					image {
						width: 95%;
					}
				
				}

			}
		}
	}

	.RecyclingCategory {
		position: relative;
		bottom: -350rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 30rpx;

		.title-box {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 70rpx;

			.text {
				font-size: 28.99rpx;
				font-weight: bold;
				color: #333333;
				margin: 0 20rpx;
			}

			.line {
				width: 72.46rpx;
				height: 2.42rpx;
				background-color: #00D276;
			}
		}

		.content-box {
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx;

			.CategoryImg-item {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 40rpx;
				margin-bottom: 20rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}

				.item-img {
					width: 135.27rpx;
					height: 135.27rpx;

					image {
						width: 135.27rpx;
						height: 135.27rpx;
					}
				}

				.item-text {
					font-size: 21.74rpx;
					color: #333333;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>